<template>
	<view>
		<div style="height: 50rpx;background:#fff"></div>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('平台申诉')}}
			</div>
		<view class="invited_items">
			<view class="invited_item">
				<view class="title">
				{{$t('当前绑定')}}
				</view>
				<view class="info_text">
					<input class="info_input" v-model="remarkName" disabled="true" />
				</view>
			</view>
			<view class="invited_item">
				<view class="title">
					{{$t('情況说明')}}
				</view> 
				<view class="info_text">
					<u-textarea v-model="remarkValue" :customStyle="{background: '#F6F7FB'}" height="200rpx" border="none" placeholder="请输入您的情況..." ></u-textarea>
				</view>
			</view>
		</view>
		
		<view class="invited_item">
			<text v-if="bind_item&&bind_item.bind"> {{$t('平台申诉')}}:{{bind_item.bind.username}}，{{$t('状态')}}:<text v-if="bind_item.status==1">{{$t('申请中')}}</text> <text v-if="bind_item.status==2">{{$t('已同意')}}</text>  <text v-if="bind_item.status==3">{{$t('已拒绝')}}</text></text>
		</view>
		
		
		<view class="footer_btn1">
			<u-button type="primary"  class="btn customStyle" :text="$t('提交申请')" :loading="submit_loading" :disabled="submit_loading" @click="submit_sub"></u-button>
			<view class="text">
				{{$t('平台将在')}}24{{$t('小时内进行处理或')}}{{$t('回复')}}
			</view>
		</view>
	</view>
</template>

<script>
	import { appeal_bind} from '@/api/driver'
	import { shensu_bind} from '@/api/basic'
	
	
	export default {
		data() {
			return {
				remarkName:'',
				remarkValue:'',
				submit_loading:false,
				driverInfor:{},
				driver_jl_id:'',
				bind_item:{}
			}
		},
		onShow() {
			this.shensu_bindfind()
		},
		onLoad(options) {
			 this.driverInfor=JSON.parse(options.driver_infor)
			 console.log(this.$t('传递参数'),this.driverInfor)
			  this.remarkName=this.driverInfor.username
			  this.driver_jl_id=options.id
		},
		methods: {
			back() {
				// uni.navigateBack()
				this.cback()
			},
			submit_sub(){
				this.submit_loading=true
				setTimeout(()=>{
					this.submit_loading=false
				},1000)
				let pickerForms={
					 id:this.driver_jl_id,
					 user_id:this.driverInfor.id,
					 remark:this.remarkValue
				}
				appeal_bind(pickerForms).then((res) => {
					console.log(this.$t('平台申诉'),res)
					uni.$emit('refreshIndex', true)
					uni.navigateBack({
					  delta: 2,
					})
				})
			},
			shensu_bindfind(){
				var that = this
				shensu_bind({user_id:uni.getStorageSync('user_id')}).then((res) => {
					that.bind_item = res.data.data.data
					that.remarkID = that.bind_item.bind.id
					that.remarkValue = that.bind_item.remark.remark
					that.img = that.bind_item.image
					that.fileList1.push({
						url:that.IMAGE_URL+that.bind_item.image
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
		background-color: #F6F7FB;
	}
.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background:#fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}
	.customStyle{
		border: none;
	}
	.invited_items{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.invited_item{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 24rpx;
		padding:10rpx 0 30rpx;
		.ph{
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
		}
	}
	.footer_btn1{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		z-index: 9;
		padding:30rpx 30rpx 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		.btn{
			width: 100%;
			height: 90rpx;
			border-radius: 50rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color:#fff;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight:500;
		}
		.text{
			width: 100%;
			height: 90rpx;
			color:#8C8C8C;
			text-align: center;
			line-height: 90rpx;
			font-size: 24rpx;
			font-weight: 400;
		}
	}
</style>
